<template>
  <div>
    <v-chart title="各部门考核占比情况" :forceFit="true" :height="height" :padding="50" :data="data" :scale="scale">
      <v-tooltip :showTitle="false" dataKey="deptName*percent" />
      <v-axis :label="labelConfig" />
      <v-legend :textStyle="textStyle" position="bottom" dataKey="deptName" />
      <v-pie position="percent" color="deptName" :v-style="pieStyle" :label="labelConfig" />
      <v-coord type="theta" />
    </v-chart>
  </div>
</template>

<script>
import DataSet from '@antv/data-set';

export default {
  name: 'Pie',

  props: {
    sourceData: {
      type: Array,
      default: () => [],
    },

    height: {
      type: Number,
      default: 400,
    }
  },

  data() {
    return {
      data: [],
      scale: [
        {
          dataKey: 'percent',
          min: 0,
          formatter: '.0%',
        },
      ],
      pieStyle: {
        stroke: '#fff',
        lineWidth: 2,
      },
      textStyle: {
        fill: '#fff',
        fontSize: 16,
      },
      labelConfig: [
        'percent',
        {
          offset: -20,
          formatter: (val, item) => {
            // console.log(val, item);
            return item.point.deptName + ': ' + val;
          },
          textStyle: {
            fill: '#fff',
            fontSize: 16,
          },
        },
      ],
    };
  },

  created() {
    // console.log('饼状图数据--------------', this.sourceData);
    this.handleData(this.sourceData);
  },

  methods: {
    handleData(sourceData) {
      const dv = new DataSet.View().source(sourceData);
      dv.transform({
        type: 'percent',
        field: 'deptCount',
        dimension: 'deptName',
        as: 'percent',
      });
      this.data = dv.rows;
    },
  },
};
</script>
